import { NavBar, DatePicker } from 'antd-mobile'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import './index.scss'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DayBill from './conmonents/DayBill'

const Month = () => {
  // 按月做数据分组
  const billList = useSelector(state => state.bill.billList)
  const monthGroup = useMemo(()=>{
    //return出去计算之后的值 相当于vue的computed
    return _.groupBy(billList,(item=>dayjs(item.date).format('YYYY-MM')))
  },[billList])
  // console.log('ccc',monthGroup);
  //控制弹窗打开关闭
  const [dateVisible,setDateVisible] = useState(false)

  // 控制时间显示
  const [currentDate,setCurrentDate] = useState(() =>{
    return dayjs(new Date()).format('YYYY-MM')
  })
  // 根据日期分类的数组列表
  const [currentMonthList,setMonthList] = useState([])
  
  // 获取当月的总支出收入结余
  const monthResult = useMemo(() =>{
    //支出   //收入  //结余
    if(currentMonthList && currentMonthList.length){
      console.log('ccc',currentMonthList);
      const pay = currentMonthList.filter(item=>item.type === 'pay').reduce((a,c)=>a + c.money,0)
      const income = currentMonthList.filter(item=>item.type === 'income').reduce((a,c)=>a + c.money,0)
      return {
        pay,
        income,
        total:pay + income
      }
    }
  },[currentMonthList])

  //初始化的时候统计当前月的数据
  useEffect(()=>{
    const nowDate = dayjs().format('YYYY-MM')
    // monthGroup数组可能没有值 边界值控制
    if(monthGroup[nowDate]){
      setMonthList(monthGroup[nowDate])
    }
  },[monthGroup])
  // 确认回调
  const onConfirm = (date) => {
    setDateVisible(false)
    const formatDate = dayjs(date).format('YYYY-MM')
    // 取出当月的数组List存入  --设置当前选中日期
    setMonthList(monthGroup[formatDate])
    setCurrentDate(formatDate)
  }

  //当前月按照日来做分组
  const dayGroup = useMemo(()=>{
    //return出去计算之后的值 相当于vue的computed
    const groupData = _.groupBy(currentMonthList,(item=>dayjs(item.date).format('YYYY-MM-DD')))
    const keys = Object.keys(groupData)
    return {
      groupData,
      keys
    }
  },[currentMonthList])
  // console.log('www',dayGroup);

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">
              {currentDate + ''}月账单
            </span>
            <span className={classNames('arrow',dateVisible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthResult && monthResult.pay.toFixed(2)||0}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult && monthResult.income.toFixed(2)||0}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult && monthResult.total.toFixed(2)||0}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            onCancel={() => setDateVisible(false)}
            onConfirm={onConfirm}
            onClose={() => setDateVisible(false)}
            visible={dateVisible}
            max={new Date()}
          />
        </div>
        {/* 单日列表 */}
        {
          dayGroup.keys.map(key =>{
            return (<DayBill key={key} date={key} billList={dayGroup.groupData[key]}/>)
          })
        }
      </div>
    </div >
  )
}

export default Month